import React, { Component } from 'react';
import { Button, Col, DatePicker, Form, Icon, Input, Row, Select, TreeSelect } from 'antd';

const SearchFormItem = props => {
  const { form, children, fieldName, initialValue } = props;
  const { getFieldDecorator } = form;
  return getFieldDecorator(fieldName, { initialValue: initialValue })(children);
};

const { Option } = Select;
const { RangePicker } = DatePicker;

@Form.create()
class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expand: false,
      citySelectDisabled: false,
    };
  }

  componentDidMount() {}

  loadCompleted = () => {
    const { form, cities } = this.props;
    if (cities && cities.length == 1) {
      // 默认选中第一个
      form.setFieldsValue({ cityCode: cities[0].id });
      this.setState({
        citySelectDisabled: true,
      });
    }
  };

  render() {
    const { form, dictSex, isAdmin, cities, districtAndStreet } = this.props;
    const { expand } = this.state;
    return (
      <div>
        {isAdmin ? (
          // 管理员账户下需要显示的内容
          <>
            <Row gutter={16}>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'cityCode'}>
                  <Select
                    disabled={this.state.citySelectDisabled}
                    allowClear
                    placeholder={'请选择城市'}
                    style={{ width: '100%' }}
                    onChange={this.handleCityChange}
                  >
                    {cities && cities.length > 0
                      ? cities.map((item, index) => {
                          return (
                            <Option key={index} value={item.id}>
                              {item.name}
                            </Option>
                          );
                        })
                      : null}
                  </Select>
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'regionCode'}>
                  <Select
                    allowClear
                    placeholder={'请选择区域'}
                    style={{ width: '100%' }}
                    onChange={this.handleDistrictChange}
                  >
                    {districtAndStreet && districtAndStreet.length > 0
                      ? districtAndStreet.map((item, index) => {
                          return (
                            <Option key={index} value={item.id}>
                              {item.title}
                            </Option>
                          );
                        })
                      : null}
                  </Select>
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'name'}>
                  <Input placeholder={'请输入姓名'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'sex'}>
                  <Select allowClear placeholder={'请选择性别'} style={{ width: '100%' }}>
                    {dictSex && dictSex.length > 0
                      ? dictSex.map((item, index) => {
                          return (
                            <Option key={index} value={item.dictValue}>
                              {item.dictName}
                            </Option>
                          );
                        })
                      : null}
                  </Select>
                </SearchFormItem>
              </Col>
            </Row>
            <Row gutter={16} style={{ marginTop: '8px', display: expand ? 'block' : 'none' }}>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'age'}>
                  <Input placeholder={'请输入年龄'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'sfz'}>
                  <Input placeholder={'请输入身份证号'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'blbgTime'}>
                  <DatePicker
                    placeholder={'请选择病理报告日期'}
                    allowClear
                    style={{ width: '100%' }}
                  />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'isHaveError'}>
                  <Select allowClear placeholder={'请选择是否合格'} style={{ width: '100%' }}>
                    <Option value={1}>不合格</Option>
                    <Option value={0}>合格</Option>
                  </Select>
                </SearchFormItem>
              </Col>
            </Row>
            <Row gutter={16} style={{ marginTop: '8px', display: expand ? 'block' : 'none' }}>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'njStaff'}>
                  <Input placeholder={'请输入内镜诊断医师'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'njzl_time'}>
                  <RangePicker
                    placeholder={['内镜诊疗开始', '内镜诊疗结束']}
                    style={{ width: '100%' }}
                  />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'insert_datetime'}>
                  <RangePicker
                    placeholder={['创建数据开始', '创建数据结束']}
                    style={{ width: '100%' }}
                  />
                </SearchFormItem>
              </Col>
            </Row>
          </>
        ) : (
          // 非管理员下的内容
          <>
            <Row gutter={16}>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'name'}>
                  <Input placeholder={'请输入姓名'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'sex'}>
                  <Select allowClear placeholder={'请选择性别'} style={{ width: '100%' }}>
                    {dictSex && dictSex.length > 0
                      ? dictSex.map((item, index) => {
                          return (
                            <Option key={index} value={item.dictValue}>
                              {item.dictName}
                            </Option>
                          );
                        })
                      : null}
                  </Select>
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'age'}>
                  <Input placeholder={'请输入年龄'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'sfz'}>
                  <Input placeholder={'请输入身份证号'} allowClear />
                </SearchFormItem>
              </Col>
            </Row>
            <Row gutter={16} style={{ marginTop: '8px', display: expand ? 'block' : 'none' }}>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'blbgTime'}>
                  <DatePicker
                    placeholder={'请选择病理报告日期'}
                    allowClear
                    style={{ width: '100%' }}
                  />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'isHaveError'}>
                  <Select allowClear placeholder={'请选择是否合格'} style={{ width: '100%' }}>
                    <Option value={1}>不合格</Option>
                    <Option value={0}>合格</Option>
                  </Select>
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'njStaff'}>
                  <Input placeholder={'请输入内镜诊断医师'} allowClear />
                </SearchFormItem>
              </Col>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'njzl_time'}>
                  <RangePicker
                    placeholder={['内镜诊疗开始', '内镜诊疗结束']}
                    style={{ width: '100%' }}
                  />
                </SearchFormItem>
              </Col>
            </Row>
            <Row gutter={16} style={{ marginTop: '8px', display: expand ? 'block' : 'none' }}>
              <Col className="gutter-row" span={6}>
                <SearchFormItem form={form} fieldName={'insert_datetime'}>
                  <RangePicker
                    placeholder={['创建数据开始', '创建数据结束']}
                    style={{ width: '100%' }}
                  />
                </SearchFormItem>
              </Col>
            </Row>
          </>
        )}

        <Row>
          <Col span={24} style={{ textAlign: 'right', marginTop: '8px' }}>
            <Button type="primary" onClick={this.handleSearchClick}>
              查询
            </Button>
            <Button type="primary" style={{ marginLeft: 8 }} onClick={this.handleExportClick}>
              导出
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
            <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.handleToggle}>
              {this.state.expand ? '折叠' : '展开'}
              <Icon type={this.state.expand ? 'up' : 'down'} />
            </a>
          </Col>
        </Row>
      </div>
    );
  }

  /**
   * 返回输入框中的内容
   * @returns {*}
   */
  getData = () => {
    const { form } = this.props;
    const data = form.getFieldsValue();
    return data;
  };

  /**
   * 查询按钮被点击
   */
  handleSearchClick = () => {
    const { form, onSearchClick } = this.props;
    const data = form.getFieldsValue();
    if (onSearchClick) {
      onSearchClick(data);
    }
  };

  /**
   * 导出按钮被点击
   */
  handleExportClick = () => {
    const { onExportClick } = this.props;
    if (onExportClick) {
      onExportClick();
    }
  };

  /**
   * 重置按钮被点击
   */
  handleReset = () => {
    const { form, onResetClick } = this.props;
    form.resetFields();
    if (onResetClick) {
      onResetClick();
    }
  };

  /**
   *展开与否状态切换
   */
  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  /**
   * 城市变更
   * @param value
   */
  handleCityChange = value => {
    let { form, onCityChange } = this.props;
    //清空选择
    form.resetFields('regionCode');
    if (onCityChange) {
      onCityChange(value);
    }
  };

  /**
   * 区域变更
   * @param value
   */
  handleDistrictChange = value => {
    console.log(`区域:${JSON.stringify(value)}`);
  };
}

export default SearchForm;
